<template>
  <div class="videoSurveillance">
    <Row :gutter="8" style="height: 100%;">
      <Col class="gutter-row list" :span="5">
        <Card  dis-hover :bordered="true" style="height: 200px;">
          <template #title>搜索</template>
          <Form ref="formSearch" style="width: 100%" :model="formDataSearch" label-position="top">
            <Row :gutter="8">
              <Col :span="12">
                <FormItem label="车牌号">
                  <i-input v-model="formDataSearch.carPlateNo" placeholder="请输入车牌号码" clearable/>
                </FormItem>
              </Col>
              <Col :span="12">
                <FormItem label="车牌颜色">
                  <Select v-model="formDataSearch.carPlateColor" clearable>
                    <Option v-for="item in colorList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Button type="primary" @click="searchSubmit" long>搜索</Button>
          </Form>
        </Card>
        <Card dis-hover :bordered="true" style="height: calc(100% - 208px);overflow: hidden;margin-top: 8px">
          <template #title>车辆列表</template>
          <xdTable ref="xdTableRef" :tableData="tableData"></xdTable>
        </Card>
      </Col>
      <Col class="gutter-row" :span="19">
        <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;">
          <videoDiv style="height: 100%;"></videoDiv>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script setup>
import videoDiv from "@/components/videoModule/videoDiv.vue";
import {inject, reactive, ref, resolveComponent,nextTick} from 'vue'
const apiUrl = inject('$apiUrl') //接口调用
const $axios = inject('$axiosInterceptor');// 变量全局化 axios
import xdTable from '@/components/table/index.vue'
const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件

// //车辆列表
// $axios.post(apiUrl.coreVehicleCoreVehiclePageList,{videoState:1}).then((res) => {
  // $ViewUIPlus.Spin.hide()//显示加载
//  console.log(res,'122222222222')
//
// }).catch((err) => {
//   console.log("失败", err)
// })
const formDataSearch = ref({
  internetState:1
})

const xdTableRef = ref();

/**
 * 车牌颜色
 */
const colorList = [
  {
    value: '2',
    label: '黄色'
  },
  {
    value: '1',
    label: '蓝色'
  },
  {
    value: '5',
    label: '绿色'
  },
  {
    value: '95',
    label: '黄绿色'
  }
]

const tableData = reactive({
  url: apiUrl.coreVehicleCoreVehiclePageList,//请求地址
  method: 'post',//请求方式
  where: {
    internetState:1
  },//搜索条件
  height: '100%',//表格高度 auto
  page: true,//分页是否使用
  pageSize:'small',//大 big 小 small false
  columns: [//表头数据
    {type: 'index', width: 70, align: 'center', title: '序号'},
    {title: "车牌号", key: "carPlateNo", width: 130, align: "center", render: (h, params) => {
        var color = "",textColor = '';
        if (params.row.carPlateColor == 1) {//蓝色
          textColor = '#fff', color = "#2179fc";
        } else if (params.row.carPlateColor == 2) {//黄色
          textColor = '#333', color = "#fac808";
        } else if (params.row.carPlateColor == 3) {//黑色
          textColor = '#fff', color = "#515a6e";
        } else if (params.row.carPlateColor == 4) {//白色
          textColor = '#333', color = "#ffffff";
        } else if (params.row.carPlateColor == 5) {//绿色
          textColor = '#333', color = "#86f80a";
        } else if (params.row.carPlateColor == 93) {//黄绿色
          textColor = '#333', color = "#8ebe19";
        } else if (params.row.carPlateColor == 9) {//其他
          textColor = '#333', color = "blue";
        } else {
          textColor = '#333', color = "blue";
        }
        return h('span',{ style: { "cursor": "pointer",display: 'flex',justifyContent: 'center',}},[
            h('div',{style:{padding:'3px',width:'100px',height:'36px',borderRadius:'3px',color:textColor,background: color + '8A',border:`1.5px solid ${color}`,}},[
              h("div",{style:{fontSize:'15px',fontWeight:'600',color:textColor,background: color,height:'100%',borderRadius:'3px',display: 'flex',justifyContent: 'center', alignItems:'center',}}, params.row.carPlateNo)
            ]),
        ],)
      }
    },
    {title: "在线状态", key: "chn", align: "center", render: (h, params) => {
        if (params.row.vehiclePosition && params.row.vehiclePosition.isOnline) {//在线
          return h(resolveComponent('Tag'), {type: 'dot',color: 'green'}, '在线');
        }else  {//黄色
          return h(resolveComponent('Tag'), {type: 'dot',color: 'red'}, '离线');
        }
      }
    }
  ],
  pagingParameters:{// 分页参数
    page:'pageNo',
    limit:'pageSize'
  },
  format: {//返回数据格式
    list: ['data'],//数据list
    count: ['count'],//数据总量
  },
  onCurrentChange:(currentRow, oldCurrentRow)=>{//列表点击事件的回调事件

  }
})

/**
 * 搜索车辆信息
 */
const searchSubmit = () => {
  let data = {...formDataSearch.value};
  tableData.where = data;
  xdTableRef.value.tableLoadData(true)
}

</script>
<style lang="less">
  .videoSurveillance{
    height: 100%;
    padding: 10px;

    .ivu-card-body {
      height: 100% ;
    }
    .list{
      .ivu-card-body {
        height: calc(100% - 41px);
      }
    }
  }
</style>
